import React from 'react'
import RefIcon from "../../../../../../res/images/web/game-room/judge@2x.png";
import WhistleIcon from "../../../../../../res/images/web/game-room/whistle@2x.png";
import {WhiteSpace,} from "antd-mobile";
import TLiveSysMsg from "./TLiveSysMsg/TLiveSysMsg";
import TLiveTeamMsg from "./TLiveTeamMsg/TLiveTeamMsg";

const TLiveList = props => {

    let {
        tlive,
    } = props


    const template = tlive
        .map((t, index) => {
            const {
                data,
                position,
                type,
            } = t

            if (position === 0) {
                if (type === 0) {
                    // return systemMsg(data, RefIcon)
                    return <TLiveSysMsg type={type} data={data} icon={RefIcon} key={index}/>
                } else {
                    return <TLiveSysMsg type={type} data={data} icon={WhistleIcon} key={index}/>
                }
            } else {
                return <TLiveTeamMsg data={data} type={type} position={position} key={index}/>
            }
        })

    const stripStyle = {
        width: '54px',
        height: '1px',
        background: 'rgba(51,51,51,0.2)',
    }

    return (
        <div>
            <div className='flex-center-align-center'>

                <div style={stripStyle}/>
                <p
                    style={{
                        padding: '0 8px',
                        fontSize: '16px',
                        lineHeight: '22px',
                        color: '#333',
                    }}
                >文字直播</p>

                <div style={stripStyle}/>

            </div>

            <WhiteSpace/>

            {template}
        </div>
    )


}

export default TLiveList
